<template>
  <div class="d-flex">
    <el-select
      v-model="searchData.serialno"
      filterable
      clearable
      placeholder="请选择喷灌机"
      style="width:100%;"
      @change="changeDevice"
    >
      <el-option
        v-for="(item,index) in filterDevices"
        :key="index"
        :label="`${item.name} - ${item.serialno}`"
        :value="item.serialno"
      />
    </el-select>
    <div class="fix-btns">
      <el-tooltip content="新增计划" placement="top">
        <el-button type="primary" icon="el-icon-plus" @click="add">新增计划</el-button>
      </el-tooltip>
      <el-tooltip content="刷新计划" placement="top">
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新计划</el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dclassCodeMap } from '@/utils/constant'
export default {
  data() {
    return {
      searchData: {}
    }
  },
  computed: {
    ...mapGetters(['devices']),
    filterDevices() {
      return this.devices.filter(val => {
        return +val.product_type === +dclassCodeMap.pg
      })
    }
  },
  methods: {
    changeDevice(e) {
      this.$emit('changeDevice', e)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
